/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Animated, Dimensions, ImageBackground, ScrollView, StatusBar, Text, TouchableHighlight, View } from 'react-native';
import styles from './styles';
import { buttons, handleButtonPress } from './services';

const windowHeight = Dimensions.get('window').height;

export default class Select extends Component<any> {
  constructor(props) {
    super(props);
    this.state = {
      scrollY: new Animated.Value(0), // 初始化滚动位置
    };
  }

  render() {
    return (
      <ImageBackground
        resizeMode="stretch"
        style={styles.constiner}
        source={require('../../src/image/adventure_unit.jpg')}>
        <StatusBar 
          hidden={false}
          backgroundColor="black"
          barStyle={ 'light-content'}
        />
        <View style={styles.View}>
          <ScrollView
            style={{}}
            showsVerticalScrollIndicator={false}
            onScroll={Animated.event([
              {
                nativeEvent: {
                  contentOffset: {
                    y: this.state.scrollY,
                  },
                },
              },
            ], { useNativeDriver: false } )}
          >
            <View style={styles.plain}></View>
            {buttons.map((button, index) => {
              // 计算按钮中心的 y 坐标
              const buttonCenterY = (index + 0.5) * windowHeight / buttons.length;
              // 计算按钮与屏幕中心的距离
              const distanceFromCenter = Math.abs(buttonCenterY + Dimensions.get("window").height/2 - this.state.scrollY._value);

              // 计算缩放值，中间的按钮最大
              const scale = 1 + (0.2 - distanceFromCenter / (windowHeight / 2));

              // 计算位移，奇偶位置位移方向相反
              const offset = (index % 2 === 0 ? -1 : 1) * (1 - scale) * 40;

              return (
                <Animated.View
                  key={button.value}
                  style={[
                    styles.button,
                    {
                      transform: [
                        {
                          scale: this.state.scrollY.interpolate({
                            inputRange: [
                              windowHeight * (index - 3) / 9 - Dimensions.get("window").height/3,
                              windowHeight * (index - 2) / 9  - Dimensions.get("window").height/3,
                              windowHeight * (index - 1) / 9 - Dimensions.get("window").height/3,
                              windowHeight * (index + 0) / 9 - Dimensions.get("window").height/3,
                              windowHeight * (index + 1) / 9 - Dimensions.get("window").height/3,
                              windowHeight * (index + 2) / 9 - Dimensions.get("window").height/3,
                              windowHeight * (index + 3) / 9 - Dimensions.get("window").height/3,
                            ],
                            outputRange: [0.5, 0.6, 0.8, 1, 0.8, 0.6, 0.5],
                            extrapolate: 'clamp',
                          }),
                        },
                        {
                          translateX: offset, // 应用位移
                        },
                      ],
                    },
                  ]}
                >
                  <TouchableHighlight
                    style={styles.button}
                    onPress={() => handleButtonPress(button.value, this.props.navigation)}
                  >
                    <Text style={styles.buttonTitle}>{button.title}</Text>
                  </TouchableHighlight>
                </Animated.View>
              );
            })}
            <View style={styles.plain}></View>
          </ScrollView>
        </View>
      </ImageBackground>
    );
  }
}